<template>
	<view style="padding: 15rpx;">
		<uni-search-bar bgColor="#ffffff" placeholder="请输入店铺名称"  v-model="searchValue" @input="input"></uni-search-bar>
		<!-- <view class="shop" v-for="(item,index) in list" :key="index">
			<image :src="item.store_logo" mode="aspectFill" style="width: 200rpx;height: 200rpx;"></image>
			<view style="display: flex;flex-direction: column; width:520rpx;justify-content: space-between;">
				<view style="display: flex;height: 80rpx;width:520rpx;align-items: center;justify-content: space-between;">
					<text style="font-weight: bold;">{{item.store_name}}</text>
					<button @click="goShop(item)" style="background-color: #FD9CAE;color: white;width: 100rpx;height: 50rpx;font-size: 28rpx;padding: 0;display: flex;align-items: center;justify-content: center;">进店</button>
				</view>
				<view>{{item.store_province_name}}{{item.store_city_name}}{{item.store_district_name}}{{item.store_address}}</view>
				<view style="font-size: 12px;color: 808080;margin-bottom: 20rpx;">{{item.juli}}</view>
				<view style="font-size: 12px;color: 808080;margin-bottom: 20rpx;">{{item.juli}}</view>
				<view style="width: 321rpx;color:#808080;font-size: 24rpx;">
					<image src="@/static/home/weizhi.png" style="width: 26rpx;height: 26rpx;"></image>
					<text style="overflow: inherit;">{{item.juli}}</text>
				</view>
				<view style="width: 321rpx;color:#808080;font-size: 24rpx;">
					<image src="@/static/home/weizhi.png" style="width: 26rpx;height: 26rpx;"></image>
					<text style="overflow: inherit;"></text>
				</view>
			</view>
		</view> -->
		<view class="store-item" v-for="(item,index) in shop_list" :key="index">
			<image class="store-image" :src="item.store_logo" mode="aspectFill"></image>
			<view class="store-item-right">
				<view style="display: flex;height: 80rpx;width:520rpx;align-items: center;justify-content: space-between;">
					<text style="font-weight: bold;">{{item.store_name}}</text>
					<button @click="goShop(item)" style="background-color: #FD9CAE;color: white;width: 100rpx;height: 50rpx;font-size: 28rpx;padding: 0;display: flex;align-items: center;justify-content: center;">进店</button>
				</view>
				<view class="store-title">{{item.juli}}</view>
				<view class="store-title">{{item.store_province_name}}{{item.store_city_name}}{{item.store_district_name}}{{item.store_address}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue:"",
				shop:{
					agent_id: 0,
					ali_qr_code: "",
					ali_true_name: "",
					apply_type: 2,
					business_hours: " 11:00-14:00 17:00-21:30 ",
					business_licence: "http://localelife.chunchuangkeji.cn/static/admin/images/none.png",
					certification_status: "已认证",
					company_address: "北京,海淀, 海淀大街中关村100",
					company_city_id: 110100000000,
					company_district_id: 110108000000,
					company_province_id: 110000000000,
					contacts_name: "卢xxx",
					contacts_phone: "15555555555",
					contract_img: "",
					create_time: "2023-10-20 17:18:34",
					drug_business: null,
					expiration_time: "2023-10-20",
					food_business: null,
					freeze_money: "0.00",
					goods_num: 7,
					id: 1,
					is_collection: 1,
					is_refund_money: 0,
					juli: "12229.3km",
					kefu_id: 0,
					lat: "39.979427",
					listing_time: 0,
					lng: "116.313841",
					main_industry: "炒菜·家常菜",
					medical_business: null,
					member_account: "0",
					member_id: 2,
					member_name: "用户55343",
					merchant_ratio: "0",
					mobile: "15555555555",
					pay_money: "0.00",
					pay_password: "",
					range: "",
					recommend: 0,
					refund_no: null,
					refund_success_time: 0,
					refund_time: 0,
					role: 1,
					run_type: 1,
					service_phone: "010-83111156",
					shopName: "胡同小馆(中关村店)",
					sort: 0,
					status: "1",
					stay_time: 0,
					store_address: "",
					store_backdrop: "",
					store_backdrop_id: "",
					store_city_id: 0,
					store_city_name: "",
					store_collection_num: 1,
					store_district_id: 0,
					store_district_name: "",
					store_introduce: "",
					store_level: 0,
					store_logo: "https://localelife.chunchuangkeji.cn/uploads/images/74/thumb/29a0de7b76486e85942ef89da3d4e2.jpg",
					store_logo_id: "20640",
					store_name: "胡同小馆(中关村店)",
					store_province_id: 0,
					store_province_name: "",
					store_star: 5,
					store_status: "正常",
					u_id: 2,
					user_money: "0.00",
					wechat_code: "13753004871",
					wechat_img: "http://localelife.chunchuangkeji.cn/static/admin/images/none.png",
					withdraw_handling_fee: "",
					workday: null,
					wx_qr_code: "",
					wx_true_name: ""
				},
				search_index: 0,
				shop_list: [],//店铺列表
				page: 1, //当前页数
				list_rows: 10, //每页条数
				status: 'more', //数据加载状态
			}
		},
		watch: {
			// 监听位置变化
			'$store.state.cityId'(newLocation) {
				this.refresh();
			}
		},
		onShow() {
			this.refresh();
		},
		/**
		 * @description 下拉刷新
		 */
		onPullDownRefresh() {
			this.sorttype = ''
			this.refresh();
		},
		/**
		 * @description 上拉加载
		 */
		onReachBottom() {
			this.get_Shop_list();
		},
		methods: {
			// 店铺列表
			get_Shop_list() {
				if (this.status == 'noMore') return;
				
				let params = {
					page: this.page,
					list_rows: this.list_rows
				}
				this.$api.post(global.apiUrls.postShop_list,params)
					.then(res => {
						console.log('店铺列表', res.data);
						if (res.data.code == 1) {
							if (this.page == 1) this.shop_list = [];
							this.shop_list.push(...res.data.data.data);
							let num = this.list_rows;
							if (this.shop_list.length < res.data.data.total) {
								this.status = 'more';
								this.page++;
							} else {
								this.status = 'noMore';
							}
							uni.stopPullDownRefresh();
						} else {
							this.status = 'more';
							uni.stopPullDownRefresh();
						}
						this.$forceUpdate();
						console.log(this.shop_list)
					})
					.catch(err => {
						console.log('店铺列表ERROR: ', err);
					});
			},
			/**
			 * @description 刷新
			 */
			refresh() {
				this.page = 1;
				this.status = 'more';
				this.shop_list = [];
				this.get_Shop_list();
			},
			input(){
				
			},
			toShopList(){
				
			},
			goShop(item) {
				console.log(item)
				this.$urouter.navigateTo({
					url: '/pages/goods/shop/shop/index',
					params: {
						partner_id: 2
					}
				});
			},
		}
	}
</script>

<style scoped>
	.store-image{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		flex-shrink: 0;
		margin-right: 10rpx;
	}
	.store-title{
		font-size: 12px;
		color: #808080;
		margin-bottom: 20rpx;
	}
	.store-item-right{
		display: flex;
		flex-direction: column;
		width:520rpx;
		justify-content: space-between;
	}
	.store-item{
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.shop {
		justify-content: space-between;
		width: 720rpx;
		display: flex;
		height: 200rpx;
	}
</style>
